<template>
  <view class="page-header" :style="{paddingTop:`${securityHeight}px`,background:background,color:color}">
    <uni-icons class="back" type="home" size="23" @tap="home()" v-if="needHome" :color="color"></uni-icons>
    <uni-icons class="back" type="left" size="23" @tap="back()" v-else-if="needBack" :color="color"></uni-icons>
    {{title}}
  </view>
</template>

<script setup>
  defineProps({
    needBack: {
      type: Boolean,
      default: true
    },
    needHome: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '未定义名称'
    },
    background: {
      type: String,
      default: 'F7F0E6'
    },
    color:{
      type: String,
      default: '#000'
    }
  })
  /**
   * 获取安全距离
   */
  const securityHeight = ref(0)
  const getSecurityHeight = () => {
    let app = uni.getSystemInfoSync()
    securityHeight.value = app.statusBarHeight + 3
  }
  const back = () => {
    uni.navigateBack()
  }
  const home = () => {
    uni.switchTab({
    	url:"/pages/index/index"
    })
  }
  getSecurityHeight()
</script>

<style lang="scss">
  .page-header {
    text-align: center;
    line-height: 80rpx;
    position: relative;
    font-weight: bold;
    height: 80rpx;
    font-size: 34rpx;

    .back {
      left: 20rpx;
      position: absolute;
    }
  }
</style>
